<template>
  <div>
    <el-dialog
      title="就诊跟踪"
      :visible.sync="show"
      width="70%"
    >

      <div style="padding: 0 50px;">
<!--        患者信息-->
        <el-card>
          <div slot="header" class="clearfix">
            <span>患者基本信息</span>
          </div>
          <div style="display: flex;flex-direction: row;align-items: start;">
            <div>
              <img width="150" height="200" class="hide-sm"
                   :src="patientInfo.photo === ''?'/static/img/avatar.png':patientInfo.photo">
            </div>
            <div style="margin-left: 20px;">
              <div style="font-size: 18px;font-weight: bold;margin-bottom: 10px;">{{ patientInfo.patientName }}</div>
              <div class="info-item">性别：<span>{{ $dictUtils.getDictLabel("sex", patientInfo.gender, '-') }}</span></div>
              <div class="info-item">年龄：<span>{{ patientInfo.age }}</span></div>
              <div class="info-item">出生日期：<span>{{ formatDate(patientInfo.birthDate) }}</span></div>
              <div class="info-item">身份证号：<span>{{ patientInfo.idCardNumber }}</span></div>
              <div class="info-item">电话：<span>{{ patientInfo.patientPhone }}</span></div>
              <div style="color: red;margin-top: 20px;" class="info-item">*过敏药物：<span>{{ !patientInfo.guomin || patientInfo.guomin === '' || patientInfo.guomin === null  ? '无' : patientInfo.guomin }}</span></div>

            </div>
          </div>
        </el-card>


<!--        就诊记录-->
        <el-card>
          <div slot="header" class="clearfix">
            <span>就诊记录</span>
          </div>
          <div>
            <vxe-table
              border="inner"
              auto-resize
              resizable
              size="small"
              ref="visitInfoTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :menu-config="{}"
              :print-config="{}"
              :sort-config="{remote:true}"
              :data="visitDataList"
              :checkbox-config="{}">
              <vxe-column
                field="visitDataList"
                title="就诊记录">
                <template slot-scope="scope">
                  <span>{{scope.row.visitRecord}}</span>
                </template>
              </vxe-column>
              <vxe-column
                field=""
                title="主治医生">
                <template slot-scope="scope">
                  {{scope.row.doctorInfo.doctorName}}
                </template>
              </vxe-column>
              <vxe-column
                field="departmentId"
                title="就诊科室">
                <template slot-scope="scope">
                  {{$officeUtils.getOfficeName(scope.row.departmentId,'--')}}
                </template>
              </vxe-column>
              <vxe-column
                field="visitTime"
                title="就诊时间">
              </vxe-column>
              <vxe-column
                field="diagnosis"
                title="诊断结果">
              </vxe-column>

            </vxe-table>
          </div>
        </el-card>


<!--        用药记录-->
        <el-card>
          <div slot="header" class="clearfix">
            <span>用药记录</span>
          </div>
          <div>
            <vxe-table
              border="inner"
              auto-resize
              resizable
              size="small"
              ref="medicationInfoTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :menu-config="{}"
              :print-config="{}"
              :sort-config="{remote:true}"
              :data="medicationInfoList"
              :checkbox-config="{}">
              <vxe-column
                field="visitId"
                title="就诊记录">
                <template slot-scope="scope">
                  <span>{{ scope.row.visitInfo.visitRecord }}</span>
                </template>
              </vxe-column>
              <vxe-column
                field=""
                title="患者姓名">
                <template slot-scope="scope">
                  {{scope.row.patientInfo.patientName}}
                </template>
              </vxe-column>
              <vxe-column
                field=""
                title="医生姓名">
                <template slot-scope="scope">
                  {{scope.row.doctorInfo.doctorName }}
                </template>
              </vxe-column>
              <vxe-column
                field="medicationName"
                title="药品名称">
                <template slot-scope="scope">
                  {{scope.row.drugInfo.drugName }}
                </template>
              </vxe-column>
              <vxe-column
                field="dosage"
                title="剂量">
              </vxe-column>
              <vxe-column
                field="frequency"
                title="吃药频率">
              </vxe-column>
              <vxe-column
                field="duration"
                title="开药数量">
              </vxe-column>
            </vxe-table>
          </div>
        </el-card>


<!--        预约信息-->
        <el-card>
          <div slot="header" class="clearfix">
            <span>预约信息</span>
          </div>
          <div>
            <vxe-table
              border="inner"
              auto-resize
              resizable
              size="small"
              ref="appointmentInfoTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :menu-config="{}"
              :print-config="{}"
              :sort-config="{remote:true}"
              :data="appoionmentInfoList"
              :checkbox-config="{}">
              <vxe-column
                field=""
                title="患者姓名">
                <template slot-scope="scope">
                  <span>{{scope.row.patientInfo.patientName}}</span>
                </template>
              </vxe-column>
              <vxe-column
                field="departmentId"
                title="预约科室">
                <template slot-scope="scope">
                  {{$officeUtils.getOfficeName(scope.row.departmentId,'--')}}
                </template>
              </vxe-column>
              <vxe-column
                field=""
                title="医生姓名">
                <template slot-scope="scope">
                  {{scope.row.doctorInfo.doctorName}}
                </template>
              </vxe-column>
              <vxe-column
                field="appointmentTime"
                sortable
                title="预约时间">
              </vxe-column>

              <vxe-column
                field="appointmentStatus"
                sortable
                title="预约状态">
                <template slot-scope="scope">
                  {{ $dictUtils.getDictLabel("application_state", scope.row.appointmentStatus, '-') }}
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </el-card>


<!--        费用信息-->

        <el-card>
          <div slot="header" class="clearfix">
            <span>费用信息</span>
          </div>
          <div>
            <vxe-table
              border="inner"
              resizable
              size="small"
              ref="billingInfoTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :data="billingInfoList"
              :checkbox-config="{}">
              <vxe-column
                field="patientId"
                title="患者姓名">
                <template slot-scope="scope">
                  <span>{{scope.row.patientInfo.patientName}}</span>
                </template>
              </vxe-column>
              <vxe-column
                field="visitId"
                title="就诊记录">
                <template slot-scope="scope">
                  {{ scope.row.visitInfo.visitRecord}}
                </template>
              </vxe-column>
              <vxe-column
                field="consumptionItem"
                title="消费项">
                <template slot-scope="scope">
                  {{scope.row.drugInfo.drugName }}
                </template>
              </vxe-column>
              <vxe-column
                field="unitPrice"
                title="单价">
              </vxe-column>
              <vxe-column
                field="amount"
                title="数量">
              </vxe-column>
              <vxe-column
                field="cost"
                title="费用金额">
              </vxe-column>
              <vxe-column
                field="paymentMethod"
                title="支付方式">
                <template slot-scope="scope">
                  {{ $dictUtils.getDictLabel("payment_method", scope.row.paymentMethod, '-') }}
                </template>
              </vxe-column>
              <vxe-column
                field="paymentStatus"
                title="支付状态">
                <template slot-scope="scope">
                  {{ $dictUtils.getDictLabel("application_state", scope.row.paymentStatus, '-') }}
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </el-card>


<!--        回访信息-->
        <el-card>
          <div slot="header" class="clearfix">
            <span>回访信息</span>
          </div>
          <div>
            <vxe-table
              border="inner"
              auto-resize
              resizable
              size="small"
              ref="followUpInfoTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :menu-config="{}"
              :print-config="{}"
              :sort-config="{remote:true}"
              :data="followUpInfoList"
              :checkbox-config="{}">
              <vxe-column
                field="followName"

                title="回访名称">
                <template slot-scope="scope">
                  <span>{{scope.row.followName}}</span>
                </template>
              </vxe-column>
              <vxe-column
                field=""

                title="病人姓名">
                <template slot-scope="scope">
                  {{scope.row.patientInfo.patientName}}
                </template>
              </vxe-column>
              <vxe-column
                field=""
                sortable
                title="医生姓名">
                <template slot-scope="scope">
                  {{scope.row.doctorInfo.doctorName}}
                </template>
              </vxe-column>
              <vxe-column
                field="healthStatus"
                title="健康状态">
              </vxe-column>
              <vxe-column
                field="followUpDate"
                sortable
                title="回访时间">
              </vxe-column>
            </vxe-table>
          </div>
        </el-card>


      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">关 闭</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>

import visitInfoService from '@/api/visit/visitInfoService'
import medicationInfoService from '@/api/medication/medicationInfoService'
import appointmentInfoService from '@/api/appointment/appointmentInfoService'
import billingInfoService from '@/api/billing/billingInfoService'
import followUpInfoService from '@/api/follow/followUpInfoService'

export default {
  name: 'report',
  data () {
    return {
      myDoctorList: [],
      show: false,
      patientInfo: {},
      visitDataList: [], // 就诊记录
      medicationInfoList: [], // 用药记录
      appoionmentInfoList: [], // 预约信息
      billingInfoList: [], // 费用信息
      followUpInfoList: [] // 回访信息
    }
  },

  methods: {
    init (patient) {
      this.show = true
      this.patientInfo = patient
      console.log('patientInfo', patient)
      this.visitList()
      this.getMedicationInfoList()
      this.getAppoionmentInfoList()
      this.getBillingInfoList()
      this.getFollowUpInfoList()
    },

    getFollowUpInfoList () {
      followUpInfoService.list({
        'current': 1,
        'size': 999,
        'patientId': this.patientInfo.id
      }).then(({data}) => {
        this.followUpInfoList = data.records
        console.log('回访信息followUpInfoList', this.followUpInfoList)
      })
    },

    getBillingInfoList () {
      billingInfoService.list({
        'current': 1,
        'size': 999,
        'patientId': this.patientInfo.id
      }).then(({data}) => {
        this.billingInfoList = data.records
        console.log('费用信息billingInfoList', this.billingInfoList)
      })
    },

    // 预约信息
    getAppoionmentInfoList () {
      appointmentInfoService.list({
        'current': 1,
        'size': 999,
        'patientId': this.patientInfo.id
      }).then(({data}) => {
        this.appoionmentInfoList = data.records
        console.log('预约信息appoionmentInfoList', this.appoionmentInfoList)
      })
    },

    // 用药记录
    getMedicationInfoList () {
      medicationInfoService.list({
        'current': 1,
        'size': 999,
        'patientId': this.patientInfo.id
      }).then(({data}) => {
        this.medicationInfoList = data.records
        console.log('用药记录medicationInfoList', this.medicationInfoList)
      })
    },

    // 就诊记录
    visitList () {
      visitInfoService.list({
        'current': 1,
        'size': 999,
        'patientId': this.patientInfo.id
      }).then(({data}) => {
        this.visitDataList = data.records
        console.log('就诊记录visitDataList', this.visitDataList)
      })
    },

    formatDate (dateString) {
      const date = new Date(dateString)
      const year = date.getFullYear()  // 获取年份
      const month = date.getMonth() + 1  // 获取月份，月份从0开始，所以需要加1
      const day = date.getDate()  // 获取日期

      return `${year}年${month}月${day}日`  // 使用模板字符串返回格式化的日期
    }
  }

}
</script>

<style scoped lang="scss">
.info-item {
  margin-top: 6px;
  font-size: 14px;
  color: #606266;
}

.el-card{
  margin-bottom: 20px;
}
</style>
